<!-- 各子站综合信息 -->
<template>
	<div class="dashboard-container">
		<page-header :headerTitle="$t('message.eachSubStationNews.pageTitle')" :showWeather="false" />

		<div class="filter-controls">
			<span class="filter-label">{{ $t('message.eachSubStationNews.pageSet') }}</span>
			<el-select v-model="sortSettingsValue" placeholder="Select" size="small" class="filter-select custom-select">
				<el-option v-for="item in sortSettingsData" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
		</div>

		<div class="metrics-panel">
			<div class="station-count-panel">
				<div class="panel-section">
					<span class="filter-label">{{ $t('message.eachSubStationNews.pageTotal') }}</span>
					<span class="metric-number">5</span>
					<span class="filter-label">个</span>
				</div>
			</div>

			<div style="text-align: center">
				<img src="../../assets/image8.png" alt="分隔线" style="height: 6.5rem" />
			</div>

			<div class="selection-panel">
				<div style="line-height: 2rem">
					<p class="select-title" style="">{{ $t('message.eachSubStationNews.pageStationTitle') }}</p>
					<el-select v-model="substationValue" placeholder="Select" size="small" class="custom-select">
						<el-option v-for="item in substationData" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
			</div>

			<div style="text-align: center">
				<img src="../../assets/image8.png" alt="分隔线" style="height: 6.5rem" />
			</div>

			<div class="hours-panel">
				<div class="metric-item" style="display: grid; grid-template-columns: 1fr 5fr 1fr 1fr 5fr 8fr">
					<img src="../../assets/image5.png" class="metric-icon" alt="小时图标" />
					<span>{{ $t('message.eachSubStationNews.pageDaySmall') }}</span>
					<span class="metric-value">4.00</span>
					<span class="metric-unit">h</span>
					<span class="filter-label">{{ $t('message.eachSubStationNews.pageSmallSet') }}</span>
					<el-input size="small" v-model="minDailyHours" :placeholder="$t('message.form.pageInputHolder')" class="custom-input" />
				</div>
				<div class="metric-item" style="display: grid; grid-template-columns: 1fr 5fr 1fr 1fr 5fr 8fr">
					<img src="../../assets/image5.png" class="metric-icon" alt="小时图标" />
					<span>{{ $t('message.eachSubStationNews.pageDayBig') }}</span>
					<span class="metric-value">4.45</span>
					<span class="metric-unit">h</span>
					<span class="filter-label">{{ $t('message.eachSubStationNews.pageDaySet') }}</span>
					<el-input size="small" v-model="maxDailyHours" :placeholder="$t('message.form.pageInputHolder')" class="custom-input" />
				</div>
			</div>

			<div style="text-align: center">
				<img src="../../assets/image8.png" alt="分隔线" style="height: 6.5rem" />
			</div>

			<div class="watt-panel">
				<div class="metric-item" style="display: grid; grid-template-columns: 1fr 5fr 1fr 1fr 5fr 8fr">
					<img src="../../assets/image6.png" class="metric-icon" alt="功率图标" />
					<span>{{ $t('message.eachSubStationNews.pageTileSmall') }}</span>
					<span class="metric-value">30</span>
					<span class="metric-unit">%</span>
					<span class="filter-label">{{ $t('message.eachSubStationNews.pageSmallSet') }}</span>
					<el-input size="small" v-model="minWattOutput" :placeholder="$t('message.form.pageInputHolder')" class="custom-input" />
				</div>
				<div class="metric-item" style="display: grid; grid-template-columns: 1fr 5fr 1fr 1fr 5fr 8fr">
					<img src="../../assets/image6.png" class="metric-icon" alt="功率图标" />
					<span>{{ $t('message.eachSubStationNews.pageTileBig') }}</span>
					<span class="metric-value">65</span>
					<span class="metric-unit">%</span>
					<span class="filter-label">{{ $t('message.eachSubStationNews.pageDaySet') }}</span>
					<el-input size="small" v-model="maxWattOutput" :placeholder="$t('message.form.pageInputHolder')" class="custom-input" />
				</div>
			</div>
		</div>

		<div class="station-grid">
			<div v-for="(station, index) in stationList" :key="index" class="station-card">
				<div class="card-header">
					<h3
						@click="oneStandsClick(station)"
						class="station-title"
						:class="{ 'all-operational': station.status === '全部发电', 'has-issue': station.status !== '全部发电' }"
					>
						{{ station.name }}
					</h3>
					<p class="station-status">{{ station.status }}</p>
				</div>

				<div class="card-body">
					<div class="metric-row">
						<div class="sub-metric">
							<div class="metric-name">{{ $t('message.eachSubStationNews.pagePower') }}</div>
							<div class="metric-value">{{ station.realTimePower }}</div>
							<div class="metric-unit">MW</div>
						</div>

						<div class="sub-metric">
							<div class="metric-name">{{ $t('message.eachSubStationNews.pageEveryTile') }}</div>
							<div class="metric-value">{{ station.powerOutput }}</div>
							<div class="metric-unit">%</div>
						</div>
					</div>

					<div class="metric-row">
						<div class="sub-metric">
							<div class="metric-name">{{ $t('message.eachSubStationNews.pageDaily') }}</div>
							<div class="metric-value">{{ station.dailyGeneration }}</div>
							<div class="metric-unit">万kWh</div>
						</div>

						<div class="sub-metric">
							<div class="metric-name">{{ $t('message.eachSubStationNews.pageHour') }}</div>
							<div class="metric-value">{{ station.dailyHours }}</div>
							<div class="metric-unit">h</div>
						</div>
					</div>

					<div class="main-metric">
						<div class="metric-name">{{ $t('message.eachSubStationNews.pageGeneration') }}</div>
						<div class="metric-main-value">{{ station.totalGeneration }}</div>
						<div class="metric-main-unit">万kWh</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { useRouter } from 'vue-router';
import { onMounted, defineComponent, reactive, toRefs } from 'vue';
import pageHeader from '../../components/pageHeader/index.vue';

export default defineComponent({
	name: '',

	components: { pageHeader },

	setup(props, { emit }) {
		const state = reactive({
			sortSettingsValue: '1',
			sortSettingsData: [
				{ value: '1', label: '选项1' },
				{ value: '2', label: '选项2' },
				{ value: '3', label: '选项3' },
				{ value: '4', label: '选项4' },
			],
			substationValue: '1',
			substationData: [
				{ value: '1', label: '选项1' },
				{ value: '2', label: '选项2' },
				{ value: '3', label: '选项3' },
				{ value: '4', label: '选项4' },
			],
			minDailyHours: '',
			maxDailyHours: '',
			minWattOutput: '',
			maxWattOutput: '',
			stationList: [
				{
					name: '苏州天佑',
					status: '全部发电',
					totalGeneration: '317.0972',
					realTimePower: '0.246',
					powerOutput: '27.03',
					dailyGeneration: '0.47',
					dailyHours: '5.18',
				},
				{
					name: '太仓利洁时',
					status: '有发电-无停机-有通讯异常',
					totalGeneration: '128.2623',
					realTimePower: '0.035',
					powerOutput: '11.67',
					dailyGeneration: '0.14',
					dailyHours: '4.96',
				},
				{
					name: '无锡液空',
					status: '有发电-无停机-有通讯异常',
					totalGeneration: '35.5097',
					realTimePower: '0.031',
					powerOutput: '30.56',
					dailyGeneration: '0.04',
					dailyHours: '4.49',
				},
				{
					name: '苏州天佑',
					status: '全部发电',
					totalGeneration: '317.0972',
					realTimePower: '0.246',
					powerOutput: '27.03',
					dailyGeneration: '0.47',
					dailyHours: '5.18',
				},
				{
					name: '苏州天佑',
					status: '全部发电',
					totalGeneration: '317.0972',
					realTimePower: '0.246',
					powerOutput: '27.03',
					dailyGeneration: '0.47',
					dailyHours: '5.18',
				},
			],
		});

		const router = useRouter();
		const oneStandsClick = (val: any) => {
			router.push({
				path: '/gatherControlManage/oneStandNews',
				query: { name: val.name },
			});
		};

		onMounted(() => {});

		return {
			oneStandsClick,
			...toRefs(state),
		};
	},
});
</script>

<style lang="scss" scoped>
.filter-controls {
	display: flex;
	align-items: center;
	margin: 6px 0;

	.filter-label {
		color: #fff;
		margin-right: 8px;
		font-size: 14px;
	}

	.filter-select {
		width: 180px;
	}
}

.metrics-panel {
	width: 100%;
	display: grid;
	height: 6.5rem;
	padding: 0.3rem;
	grid-gap: 0.3rem;
	line-height: 0.5rem;
	background-color: #0a1a32;
	grid-template-columns: 4fr 1fr 5fr 1fr 7fr 1fr 7fr;
}

.station-count-panel {
	font-size: 0.8rem;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
}

.panel-section {
	line-height: 2rem;
	font-size: 1.8rem;
	.filter-label {
		color: #fff;
		font-weight: bold;
		margin: 0 0.3rem;
	}

	.metric-number {
		color: green;
		font-weight: bold;
		margin: 0 0.3rem;
	}
}

.selection-panel {
	padding: 1rem 0;
	.select-title {
		text-indent: 0.3rem;
		font-weight: bold;
		font-size: 1rem;
		text-align: left;
	}
}

.hours-panel,
.watt-panel {
	text-align: center;
	padding: 1rem 0;
	font-size: 0.8rem;

	.metric-item {
		gap: 0.2rem;
		display: flex;
		margin: 0.2rem 0;
		flex-wrap: nowrap;
		align-items: center;

		.metric-icon {
			width: 1rem;
			height: 1rem;
		}

		.metric-value {
			color: #5fcffa;
			font-weight: 500;
			margin: 0 0.3rem;
			font-size: 1rem;
		}

		.metric-unit {
			font-size: 1rem;
			margin-right: 0.3rem;
		}
	}
}

.station-grid {
	display: grid;
	gap: 0.6rem;
	margin-top: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.station-card {
	background: #11223f;
	border-radius: 0.6rem;
	border: 1px solid #0e2446;
	overflow: hidden;
	transition: all 0.3s ease;

	&:hover {
		transform: translateY(-4px);
		box-shadow: 0 0.6rem 1rem rgba(0, 0, 0, 0.2);
	}
}

.card-header {
	text-align: center;
	background-size: 100% 100%;

	.station-title {
		margin: 0;
		font-size: 1.5rem;
		font-weight: bold;
		color: #fff;
		padding: 0.8rem 0;
		cursor: pointer;

		&.all-operational {
			background: linear-gradient(to bottom, rgb(86, 179, 124) 0%, rgba(86, 179, 124, 0.1) 100%);
		}

		&.has-issue {
			background: linear-gradient(to bottom, rgb(230, 162, 60) 0%, rgba(230, 162, 60, 0.1) 100%);
		}
	}

	.station-status {
		margin: 4px 0 0;
		font-size: 0.9rem;
	}
}

.card-body {
	.main-metric {
		display: flex;
		margin-top:  0.8rem;
		margin-bottom:  0.8rem;
		align-items: center;
		justify-content: center;

		.metric-name {
			margin-right: 0.3rem;
			font-size: 1rem;
		}

		.metric-main-value {
			color: #5fcffa;
			font-size: 1.3rem;
			font-weight: bold;
			margin: 0 0.3rem;
		}

		.metric-main-unit {
			font-size: 1rem;
			color: #b8b7b7;
		}
	}

	.metric-row {
		display: flex;
		margin-top: 0.8rem;
		align-items: center;
		justify-content: space-around;
	}

	.sub-metric {
		display: flex;
		align-items: center;
		justify-content: center;

		.metric-name {
			font-size: 1rem;
		}

		.metric-value {
			color: #5fcffa;
			font-size: 1.2rem;
			font-weight: 600;
			margin-left: 0.3rem;
			margin-right: 0.3rem;
		}

		.metric-unit {
			font-size: 0.8rem;
			color: #b8b7b7;
		}
	}
}
</style>
